import React, { Component } from 'react';
import '../styles/MyTabbar.scss'

class MyTabbar extends Component {
    constructor(props) {
        super(props)
        this.state = {
            currentIndex: 2,
            list: ['店铺', '分类', '全部商品', '购物车', '个人中心']
        }
    }
    handleClick(index) {
        this.setState({ currentIndex: index })
    }
    render() {
        return (
            <div className='tabbar'>
                {
                    this.state.list.map((item, index) => {
                        return (
                            <div className={'tabbar_item ' + (this.state.currentIndex == index ? 'active' : '')} key={index} onClick={() => { this.handleClick(index) }}>
                                {item}
                            </div>
                        )
                    })
                }
            </div>
        );
    }
}

export default MyTabbar;